<template>
	<div class="system-dic-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-row :gutter="20">
				<el-col :span="14">
					<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" :size="formSize" status-icon>
						<el-form-item label="套餐类型：" >
							<el-row class="iconfont-row" :gutter="20">
								<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" v-for="(v, k) in 3" :key="k">
									<div class="iconfont-warp">
										<div class="flex-margin">
											<div class="iconfont-warp-value">
												500
											</div>
											<div class="iconfont-warp-label mt10">短信1000元标准包</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item label="购买数量：" >
							<el-input-number v-model="num" :min="1" :max="100" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="confirmSubmit()">
								确认购买
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="10">
					<el-card>
						<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" status-icon>
							<el-form-item label="注意事项：" >
								<el-row>
									<div>
										<p>短信均支持三网(电信、联通、移动)</p>
										<p>无使用时间限制，余额永久有效</p>
										<p>购买后不可退款。</p>
									</div>
								</el-row>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</el-card>
		<payDialog ref="payDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage, FormRules } from 'element-plus';
// 引入组件
const payDialog = defineAsyncComponent(() => import('/@/views/notice/recharge/components/payDialog.vue'));
// 定义变量内容
const payDialogRef = ref();
const state = reactive<SysDicState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

const ruleForm = reactive({
	publish: 2, // 发布，快速发布1 标准发布2
	status: '',
	source: 2, // 来源，供应链1 自主发布2
	type: 1, // 商品类型，商品1 卡项2  视频3
	channel: [], // 销售渠道 1门店2线上
	brand: '', // 商品品牌
	name: '', // 商品名称
	image: '', // 商品主图
	image2: '', // 商品主图
	proportion: '1:1', // 图片视频比例
	sliderImage: [], // 商品轮播图
	isVideo: true, // 是否添加视频
	videoType: 1, // 1本地视频，2视频链接
	videoLink: '', // 视频链接
	autoplay: true, // 自动播放true,
	muteplay: true, // 静音播放true,
	storeCategory: 1, //门店商品分类
	shopCategory: 3, //商城商品分类
	
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	property: [ {required: true, message: '请选择商品属性', trigger: 'change', }],
	status: [ {required: true, message: '请选择销售状态', trigger: 'change', }],
	system: [ {required: true, message: '请选择系统分类', trigger: 'change', }],
	brand: [ {required: true, message: '请选择商品品牌', trigger: 'change', }],
	category: [ {required: true, message: '请选择门店商品分类', trigger: 'change', }],
	cellStore: [ {required: true, message: '请选择门店商品分类', trigger: 'blur', }],
	specsId: [ {required: true, message: '请选择商品规格', trigger: 'change', }],
})


// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	const data = [];
	for (let i = 0; i < 2; i++) {
		data.push({
			dicName: i === 0 ? '角色标识' : '用户性别',
			fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
			describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
			status: true,
			createTime: new Date().toLocaleString(),
			list: [],
		});
	}
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 打开新增字典弹窗
const confirmSubmit = (type?: string) => {
	payDialogRef.value.openDialog(type);
};
// 打开修改字典弹窗
const onOpenEditDic = (type: string, row: RowDicType) => {
	payDialogRef.value.openDialog(type, row);
};
// 删除字典
const onRowDel = (row: RowDicType) => {
	ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		getTableData();
		ElMessage.success('删除成功');
	}).catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
	.iconfont-row {
		.iconfont-warp {
			text-align: center;
			border: 1px solid var(--next-border-color-light);
			overflow: hidden;
			display: flex;
			transition: all 0.3s ease;
			padding:0 20px;
			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				cursor: pointer;
				transition: all 0.3s ease;
				.iconfont-warp-value {
					i {
						color: var(--el-color-primary);
						transition: all 0.3s ease;
					}
				}
				.iconfont-warp-label {
					color: var(--el-color-primary);
					transition: all 0.3s ease;
				}
			}
			.iconfont-warp-value {
				i {
					color: #606266;
					font-size: 32px;
					transition: all 0.3s ease;
				}
			}
			.iconfont-warp-label {
				color: #99a9bf;
				transition: all 0.3s ease;
			}
		}
	}
</style>
